<template>
    <div class="fill-form-item">
        <slot name="titleName"></slot>
        <template v-if="!_onlyData">
            <template v-if="itemData.valueKindId === '1'">
                <el-input class="form-item-input" v-model="itemData.itemValue" :disabled="isDisabled" :placeholder="itemData.placeholder || ''"></el-input>
            </template>
            <template v-else-if="itemData.valueKindId === '2'">
                <el-input class="form-item-input" type="textarea" :disabled="isDisabled" :row="1" v-model="itemData.itemValue" :placeholder="itemData.placeholder || ''"></el-input>
            </template>
            <template v-else-if="itemData.valueKindId === '12'">
                <el-input class="form-item-input" v-model="itemData.itemValue" :disabled="isDisabled" :maxlength="itemData.valueLength || 30" @input="checkNumber" :placeholder="itemData.placeholder || ''"></el-input>
            </template>
            <template v-else-if="itemData.valueKindId === '13'">
                <el-input class="form-item-input" v-model="itemData.itemValue" :disabled="isDisabled" :maxlength="itemData.valueLength || 30" @input="checkNumberDecimal" :placeholder="itemData.placeholder || ''"></el-input>
            </template>
            <template v-else-if="itemData.valueKindId === '11'">
                <el-date-picker
                    class="form-item-input"
                    v-model="itemData.itemValue"
                    :disabled="isDisabled"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </template>
            <template v-else-if="itemData.valueKindId === '3'">
                <el-date-picker
                    class="form-item-input"
                    v-model="itemData.itemValue"
                    :disabled="isDisabled"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="yyyy-MM-dd">
                </el-date-picker>
            </template>
            <template v-else-if="itemData.valueKindId === '4'">
                <div><el-button @click="selectAddress(itemData.extData)" :disabled="isDisabled" type="primary">选择地址</el-button></div>
            </template>
            <template v-else-if="itemData.valueKindId === '5'">
                <upLoad-cos
                    :list="itemData.extData"
                    @onUpdate="onUpdate"
                    :limit="10"
                    :customList="true"
                    :accept="`.bmp,.jpg,.jpeg,.png,.gif`"
                    type="form-data"
                    fileType="img">
                </upLoad-cos>
            </template>
            <template v-else-if="itemData.valueKindId === '6'">
                <el-select class="form-item-input" v-model="itemData.itemValue" :disabled="isDisabled" placeholder="请选择" @change="changeSelectToSow(itemData)">
                    <el-option
                        v-for="item in itemData.options"
                        :key="item.id || item"
                        :label="item.name || item"
                        :value="item.name || item">
                    </el-option>
                </el-select>
            </template>
            <template v-else-if="itemData.valueKindId === '7'">
                <el-select class="form-item-input" v-model="selectValue" :disabled="isDisabled" multiple collapse-tags placeholder="请选择" @change="changeSelect">
                    <el-option
                        v-for="item in itemData.options"
                        :key="item.id || item"
                        :label="item.name || item"
                        :value="item.name || item">
                    </el-option>
                </el-select>
            </template>
            <template v-else-if="itemData.valueKindId === '8'">
                <upLoad-cos
                    :list="itemData.extData"
                    @onUpdate="onUpdate"
                    :limit="1"
                    :customList="true"
                    :accept="`.mp4,.m2v,.mkv,.rmvb,.wmv,.avi,.flv,.mov,.m4v`"
                    type="form-data"
                    fileType="video">
                </upLoad-cos>
            </template>
            <template v-else-if="itemData.valueKindId === '9'">
                <upLoad-cos
                    :list="itemData.extData"
                    @onUpdate="onUpdate"
                    :limit="1"
                    :customList="true"
                    :accept="'.wmv,.act,.rec,.vy1,.vy2,.vy3,.vy4,.sc4,.dvf,.msc,.wma,.mp3,.wav,.aiff,.ava'"
                    type="form-data"
                    fileType="audio">
                </upLoad-cos>
            </template>
            <template v-else-if="itemData.valueKindId === '10'">
                <upLoad-cos
                    :list="itemData.extData"
                    @onUpdate="onUpdate"
                    :limit="5"
                    :customList="true"
                    :accept="'*'"
                    type="form-data"
                    fileType="doc">
                </upLoad-cos>
            </template>
            <map-location ref="MapLocation" @updateAddress="updateAddress"></map-location>
        </template>
        <content-view v-else :valueKindId="itemData.valueKindId" :itemData="itemData"></content-view>
    </div>
</template>

<script lang="ts">
import { Component, Prop, PropSync } from "vue-property-decorator";
import UpLoadCos from "@/components/upload-cos/index.vue";
import DetailMixin from "./detail.mixin";
import MapLocation from "@/components/map-location/index.vue";
import ContentView from "@/views/module-manage/src/components/fill-in/content-view.vue";

@Component({
    components: {
        UpLoadCos,
        MapLocation,
        ContentView
    }
})
export default class FillInItem extends DetailMixin {
    @PropSync(
        "item",
        {
            type: Object,
            default: () => {
                return {};
            }
        })
    private itemData!: any;

    // 禁用的表单项id
    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly disabledIdList!: any[];

    @PropSync(
        "modelData",
        {
            type: String,
            default: () => {
                return "";
            }
        })
    private model!: string;

    @Prop({ default: false }) readonly isTable!: boolean;

    selectValue: any[] = []
    oldNumber = ""

    get isDisabled() {
        if (this.$route.path === '/data-retrieval/edit') {
            return this.disabledIdList.includes(this.itemData.resId || this.itemData.id) && this.$route.query.id;
        } else {
            return this.disabledIdList.includes(this.itemData.resId || this.itemData.id);
        }
    }

    created() {
        if (this.$route.query.dataFormId || this.$route.path === '/data-retrieval/edit') {
            const data = this.getValue(this.itemData);
            if (["1", "2", "3", "6", "7", "11", "12"].includes(this.itemData.valueKindId)) {
                this.$set(this.itemData, 'itemValue', data.value);
            } else {
                this.itemData.extData = data.value;
            }
            this.$set(this.itemData, 'dataItemId', data.id);

            if (this.itemData.valueKindId === "6") {
                this.changeSelectToSow(this.itemData);
            }
        }
        if (this.itemData.valueKindId === "7") {
            this.selectValue = this.itemData.itemValue ? this.itemData.itemValue.split(",") : [];
        }
    }

    // 校验数字
    checkNumber(val: any) {
        if (isNaN(Number(val)) && val !== "-") {
            this.itemData.itemValue = this.oldNumber;
        } else {
            if (val.includes('.')) {
                this.itemData.itemValue = this.oldNumber;
            } else {
                this.oldNumber = this.itemData.itemValue;
            }
        }
    }

    // 校验小数
    checkNumberDecimal(val: any) {
        if (isNaN(Number(val)) && val !== "-" && val.split('.').length > 1) {
            this.itemData.itemValue = this.oldNumber;
        } else {
            if (val.split('.')[1]) {
                if (val.split('.')[1].length > 2) {
                    this.itemData.itemValue = this.oldNumber;
                } else {
                    this.oldNumber = this.itemData.itemValue;
                }
            } else {
                this.oldNumber = this.itemData.itemValue;
            }
        }
    }

    changeSelect(val: any) {
        if (this.itemData.valueKindId === "7") this.itemData.itemValue = val.join(",");
    }

    onUpdate(list: any) {
        this.itemData.extData = list.map((item: any) => item.url);
    }

    // 选择地址
    selectAddress(data: any) {
        (this.$refs.MapLocation as any).show(data);
    }

    // 选址后回调
    updateAddress(data: any) {
        this.itemData.extData = {
            cityName: data.address,
            cityAddress: data.infoAddress,
            longitude: data.lng,
            latitude: data.lat
        };
    }
}
</script>

<style lang="scss" scoped>
</style>
